<template>
 	<div class="layui-layout layui-layout-admin">
       <div id='tb04' class="mapbg" style="width: 100%;height:100%;"></div>
       <div class="logo" style="background:url(../../../static/other/css/zlgj/images/clogo2.png) left top no-repeat;background-size:contain;"></div>
       <div class="foot">
         <Secondnav urlname='provin03'></Secondnav>
       </div>
       <div class="videolist">
       		<div class="videolistcon">
	       		<dl :class="mapcur==index?'panel tscur':'panel'" v-for="(item,index) in maplist" @click="domyclick(index)">
	          		<dt><i></i><img :src='getUrl(item.dates.logo)'></dt>
	          		<dd>{{item.dates.name}}</dd>
	          </dl>
          </div>
       </div>
       <div class="filterbg"></div>
		<div class="popup">
			<a href="javascript:;" class="popupClose" @click="close"></a>
			<div class="summary">
				<div class="summarydt">
					<video src='' autoplay="autoplay" controls="true"  class='video'></video>
          <!--iframe frameborder="0" style="width:100%;height:300px" allow="autoplay" src=""></iframe-->
				</div>
				<div class="summarydd">
					<h3>{{maplist[mapcur].dates.name}}</h3>
					<div class="jdt">
						<span>品牌影响力指数({{maplist[mapcur].dates.hot}}%)</span>
						<span class="jdtcon"><i :style='"width:"+maplist[mapcur].dates.hot+"%"'></i></span>
					</div>
					<div class="jdt">
						<span>夜间经济指数({{maplist[mapcur].dates.top}}%)</span>
						<span class="jdtcon"><i :style='"width:"+maplist[mapcur].dates.top+"%"'></i></span>
					</div>
					<div class="jdt">
						<span>活动频度指数图({{maplist[mapcur].dates.up}}%)</span>
						<span class="jdtcon"><i :style='"width:"+maplist[mapcur].dates.up+"%"'></i></span>
					</div>
					<div class="jdt">
						<span>景气度指数({{maplist[mapcur].dates.jq}}%)</span>
						<span class="jdtcon"><i :style='"width:"+maplist[mapcur].dates.jq+"%"'></i></span>
					</div>
					<div class="jdt">
						<span>满意度指数({{maplist[mapcur].dates.myd}}%)</span>
						<span class="jdtcon"><i :style='"width:"+maplist[mapcur].dates.myd+"%"'></i></span>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import echarts from 'echarts'
	import Pagetop from '../common/pagetop.vue'
	import Secondnav from './provinnav.vue'
    import 'echarts/extension/bmap/bmap'
	export default {
	  name: 'index',
	  components: {Pagetop,Secondnav},
	  data () {
	    return {
	        maplist:[{lat:120.177062,lon:30.245978,dates:{name:'杭州清河坊步行街',hot:'90',top:'100',up:'100',jq:'70',myd:'60',logo:'img01'}}],
	        mapcur:0,
	        bmap:'',
	        isauto:1
	    }
	  },
	  mounted(){
	  	this.getrl();
	  },
	  methods: {
	  	getUrl:function(logo){
	  		return require('@/assets/zlgj/'+logo+'.jpg');
	  	},

        getrl:function(){
        	var _this=this;
	        $.get(mapurl+'static/other/js/hangzhou-tracks.json', function (data) {
	        var points = [].concat.apply([], data.map(function (track) {
	            return track.map(function (seg) {
	                return seg.coord.concat([1]);
	            });
	        }));
	        let myChart = echarts.init(document.getElementById('tb04'))
	        var option='';
	        myChart.setOption(option = {
	            animation: false,
	            bmap: {
	                center: [120.13066322374, 30.240018034923],
	                zoom: 14,
	                roam: true
	            },
	            visualMap: {
	                show: false,
	                top: 'top',
	                min: 0,
	                max: 5,
	                seriesIndex: 0,
	                calculable: true,
	                inRange: {
	                    color: ['blue', 'blue', 'green', 'yellow', 'red']
	                }
	            },
	            series: [{
	                type: 'heatmap',
	                coordinateSystem: 'bmap',
	                data: points,
	                pointSize: 5,
	                blurSize: 6
	            }]
	        });
	        // 添加百度地图插件
	        var bmap = myChart.getModel().getComponent('bmap').getBMap();
			bmap.setMapStyleV2({
			  styleId: '236bf9896f40739fa728522fe36fec3b'
			});
	        bmap.addControl(new BMap.MapTypeControl());
	        _this.bmap=bmap;
	        var arr=[
				{lat:120.177062,lon:30.245978,dates:{name:'杭州清河坊步行街',hot:'90',top:'100',up:'100',jq:'70',myd:'60',logo:'pimg01'}},
				{lat:120.215752,lon:30.214367,dates:{name:'绍兴鲁迅中路步行街',hot:'10',top:'20',up:'30',jq:'40',myd:'100',logo:'pimg02'}},
				{lat:120.179989,lon:30.270499,dates:{name:'杭州星光大道电影文化步行街',hot:'100',top:'100',up:'100',jq:'100',myd:'100',logo:'pimg03'}},
				{lat:120.077558,lon:30.281039,dates:{name:'温州五马禅街',hot:'100',top:'100',up:'100',jq:'100',myd:'100',logo:'pimg04'}},
				{lat:121.566869,lon:29.883002,dates:{name:'宁波老外滩步行街',hot:'100',top:'50',up:'66',jq:'90',myd:'100',logo:'pimg05'}},
				{lat:121.557164,lon:29.878734,dates:{name:'衢州水亭门步行街',hot:'100',top:'10',up:'100',jq:'45',myd:'100',logo:'pimg06'}},
				{lat:121.544612,lon:29.85967,dates:{name:'杭州中国丝绸城步行街',hot:'90',top:'100',up:'100',jq:'100',myd:'75',logo:'pimg07'}},

			];
			_this.maplist=arr;
			setTimeout(function(){
				for(var i=0;i<arr.length;i++){
					var res=arr[i];
			      	var point_to = new BMap.Point(res.lat,res.lon);
					var marker = new BMap.Marker(point_to);
					bmap.addOverlay(marker);
				}
			},600)
        });
        var _this=this;
        setTimeout(function(){
        	_this.doimg()
        },2000)
      },
      setmapinfo:function(num,type){
      		$('.filterbg').show();
			$('.popup').show();
			$('.popup').width('3px');
			$('.popup').animate({height: '76%'},400,function(){
				$('.popup').animate({width: '50%'},400);
			});
			var _this=this;
	    setTimeout(_this.summaryShow,800);
	  },
	  close:function(){
	    $('.filterbg').hide();
	  	$('.popupClose').css('display','none');
		$('.summary').hide();
		$('.popup').animate({width: '3px'},400,function(){
			$('.popup').animate({height: 0},400);
		});
		$(".video").attr("src","")
		this.isauto=0;
	  },
	  summaryShow:function(){
	  	$('.popupClose').css('display','block');
      $('.summary').show();

	  },
	  doimg:function(){
      var carr=['video04','video05','video06','video07','video09','video02','video03']
	  	$(".video").attr("src",'http://storage.g2ma.com/upload/video/'+carr[this.mapcur]+'.mp4')
	  	//$("iframe").attr("src",'https://player.youku.com/embed/'+carr[this.mapcur]+'==?rel=0&amp&autoplay=true');

      var _this=this;
	  	var index=this.mapcur;
	  	var h=-200;
      if(_this.isauto==1){
        var m=index*h+"px";
      }
      else{
        var m=0;
      }
	  	var len=this.maplist.length;
	  	if(index<len-1){
	  		$(".videolistcon").animate({marginTop:m},'slow');

	  	}
	  	this.setmapinfo();
	  	setTimeout(function(){
	  		if(_this.isauto==1){
		  		_this.mapcur=index+1;
	        	_this.doimg()
	       }
        },330000)
	  },
	  domyclick:function(index){
	  	this.mapcur=index;
      this.isauto=0;
	  	this.doimg();

	  }
	  },
	  updated:function(){
  		this.isShow = true;
  		layui.use('form', function(){
		  var form = layui.form;
		  form.render();

		});

 	  },
	}
</script>
<style>

	@import '../../../static/other/css/zlgj/index.css'

</style>
